<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>客户管理</title>
<!-- 引入样式 -->
<link rel="stylesheet" href="/resources/css/public.css" media="all">
<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
</head>
<body class="childrenBody">
	<!-- 搜索开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  		<legend>查询条件</legend>
	</fieldset>
	<form class="layui-form" action="" id="searchFrm" style="text-align: center;">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">客户名称</label>
		      <div class="layui-input-inline">
		        <input type="text" name="customername"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">客户电话</label>
		      <div class="layui-input-inline">
		        <input type="text" name="telephone"   autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">联系人</label>
		      <div class="layui-input-inline">
		        <input type="text" name="connectionperson"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
	  </div>
	  <div class="layui-form-item" style="text-align: center;">
		    <div class="layui-input-block">
		      <button type="button" class="layui-btn" id="doSearch">查询</button>
		      <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
		    </div>
  	 </div>
	</form>
	<!-- 搜索结束-->
	
	<!-- 表格数据开始 -->
	<table class="layui-hide" id="customerList" lay-filter="customerList"></table>
	<div id="tableToolBar" style="display: none;">
		<button type="button" class="layui-btn layui-btn-sm" lay-event="add" shiro:hasPermission="customer:create">添加</button>
		<button type="button" class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchdelete" shiro:hasPermission="customer:batchdelete">批量删除</button>
	</div>
	<div id="tableCellToolBar" style="display: none;">
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-warm" lay-event="update" shiro:hasPermission="customer:update">编辑</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="delete" shiro:hasPermission="customer:delete">删除</button>
	</div>
	<!-- 表格数据结束-->
	
	<!-- 添加。修改弹出层开始 -->
	<div id="dlg" style="display: none;margin: 10px">
		<form method="post" class="layui-form" id="dataFrm" lay-filter="dataFrm">
			 <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">客户名称</label>
			      <div class="layui-input-inline">
			      	<input type="hidden" name="id">
			      	<input id="customername" type="text" lay-verify="required"  name="customername" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">公司电话</label>
			      <div class="layui-input-inline">
			        <input type="text" id="telephone" name="telephone" lay-verify="required" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">邮编</label>
			      <div class="layui-input-inline">
			        <input type="number" id="zip" name="zip" lay-verify="required|number" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">公司地址</label>
			    <div class="layui-input-block">
			      <input type="text" name="address" lay-verify="required" autocomplete="off"  class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">联系人</label>
			      <div class="layui-input-inline">
			      	<input type="hidden" name="id">
			      	<input id="connectionperson" type="text" lay-verify="required"  name="connectionperson" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">联系人电话</label>
			      <div class="layui-input-inline">
			        <input type="number" id="phone" name="phone" lay-verify="required|number" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">邮箱</label>
			      <div class="layui-input-inline">
			        <input type="text" id="email" name="email" lay-verify="required" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">开户银行</label>
			      <div class="layui-input-inline">
			      	<input type="hidden" name="id">
			      	<input id="bank" type="text" lay-verify="required"  name="bank" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">账号</label>
			      <div class="layui-input-inline">
			        <input type="number" id="account" name="account" lay-verify="required|number" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">传真</label>
			      <div class="layui-input-inline">
			        <input type="text" id="fax" name="fax" lay-verify="required" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">是否有效</label>
			      <div class="layui-input-inline">
			      	 	<input type="radio" name="available" value="1" title="是"  checked="">
      					<input type="radio" name="available" value="0" title="否" >
			      </div>
			    </div>
			  </div>
			   <div class="layui-form-item" style="text-align: center;">
			      <button class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
			      <button type="reset" class="layui-btn layui-btn-warm">重置</button>
			  </div>
		</form>
	</div>
	<!-- 添加。修改弹出层结束 -->
</body>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript">
var tableIns;
layui.use([ 'layer', 'jquery', 'table', 'form' ], function() {
	var layer = layui.layer;
	var $ = layui.jquery;
	var table = layui.table;
	var form = layui.form;
	//渲染表格
	 tableIns = table.render({
		elem : '#customerList', //渲染表格的容器
		url : '/customer/loadAllCustomer', //请求数据的地址
		cellMinWidth : 80, //全局定义常规单元格的最小宽度，layui 2.2.1 新增
		page : true, //开启分页
		toolbar : '#tableToolBar',//设置表头左上角的工具条  并开启表头右上角的工具栏
		defaultToolbar : [ 'filter', 'print' ], //设置工具栏的位置和是否显示
		height:'430px',
		cols : [ [ 
			{ type : 'checkbox', width : 80 }, 
			{ field : 'id', width : 80, title : 'ID', align : 'center'},
			{field : 'customername',width : 110,title : '客户名称',align : 'center'}, 
			{field : 'zip',width : 110,title : '客户邮编',align : 'center'},
			{field : 'address',width : 100,title : '客户地址',align : 'center'}, 
			{field : 'telephone',title : '公司电话',width : 130,align : 'center'},
			{field : 'connectionperson',title : '联系人',width : 110,align : 'center'},
			{field : 'phone',title : '联系人电话',width : 165,align : 'center'},
			{field : 'bank',width : 120,title : '开户行',align : 'center'}, 
			{field : 'account',width : 150,title : '账户',align : 'center'}, 
			{field : 'email',width : 140,title : '邮箱',align : 'center'}, 
			{field : 'available',width : 100,align : 'center',title : '是否可用',templet:function(d){
				return d.available==1?'<font color=blue>是</font>':'<font color=red>否</font>'
			}},
			{width : 137,title : '操作',align : 'center',toolbar : "#tableCellToolBar",fixed : 'right',align : 'center'} 
			] ]
	});

	//刷新表格
	$("#doSearch").click(function() {
		var params=$("#searchFrm").serialize();
		tableIns.reload({
			url : '/customer/loadAllCustomer?'+params,
		});
	})
	
	//监听表头事件
	table.on('toolbar(customerList)', function(obj){
	  var checkStatus = table.checkStatus(obj.config.id);
	  switch(obj.event){
	    case 'add':
	      openAdd();
	    break;
	    case 'batchdelete':
	    	batchdelete();
		break;
	  };
	});
	//监听行工具条
	table.on('tool(customerList)', function(obj){ 
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  if(layEvent === 'update'){ //更新
		  openUpdate(data);
	  } else if(layEvent === 'delete'){ //删除
	    layer.confirm('真的删除【'+data.customername+'】这个客户么？', function(index){
	    			$.post("/customer/deleteCustomer",{id:data.id},function(obj){
	    	    		if(obj.code==200){
	    	      			layer.close(index);
	    	      			//刷新表格
	    	      			tableIns.reload();
	    	    		}
	    	    		layer.msg(obj.msg);
	    	    	})
	    });
	  }
	});
	
	//打开添加的弹出层
	var url=""
	var mainIndex;//弹出层的索引
	 function openAdd(){
		 mainIndex=layer.open({
			title:'添加客户',
			type:1,
			area:['800px','560px'],
			content:$("#dlg"),
			success:function(layero, index){
				$("#dataFrm")[0].reset();
				url="/customer/addCustomer";
			}
		});
	}
	//打开修改弹出层
	function openUpdate(data){
		 mainIndex=layer.open({
				title:'修改客户',
				type:1,
				area:['800px','560px'],
				content:$("#dlg"),
				success:function(layero, index){
					//加载默认数据
					form.val('dataFrm',data);
					url="/customer/updateCustomer";
				}
			});
	}
	//做保存
	form.on("submit(doSubmit)",function(data){
		var params=$("#dataFrm").serialize();
		$.post(url,params,function(obj){
			if(obj.code==200){
				layer.msg(obj.msg);
				layer.close(mainIndex);
				//刷新表格
				tableIns.reload();
			}else{
				layer.msg(obj.msg);
			}
		});
		return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
	});
	
	function batchdelete(){
		var checkStatus = table.checkStatus('customerList');
    	var data = checkStatus.data;
    	if(data.length>0){
    		layer.confirm('确定要删除选中的所有客户吗?', function(index){
    			var ids = "";
    			for(var i=0;i<data.length;i++){
    				if(i==0){
    					ids += "ids="+data[i].id; 
    				}else{
    					ids += "&ids="+data[i].id;
    				}
    			}
    			$.post("/customer/batchDelete?"+ids,function(obj){
    				layer.msg(obj.msg);
    	            tableIns.reload();
    	            layer.close(index);
    			});
    	    })
    	}else{
    		layer.msg("请选择删除项");
    	}
	}
}); 
</script>
</html>